<template>
	<view>
		<!-- <page-head :title="'我的邀请'" :headtype="2"></page-head> -->
		<image class="bg" :src="apifun.serveimg+'bg.png'" mode=""></image>
		<view class="qrcode">
			<view class="qrusermsg flex">
				<view class="qrumavatar">
					<image v-if="!usermsg.avatar" :src="apifun.serveimg+'headav.png'" mode=""></image>
					<image v-if="usermsg.avatar" :src="apifun.URLimg+usermsg.avatar" mode=""></image>
				</view>
				<view class="qrummsg">
					<view class="qrummsgname">{{ usermsg.username }}</view>
					<view class="qrummsgxy">邀请你来领取学员</view>
				</view>
			</view>
			<view class="qrcodemsg">
				<image :src="apifun.URLimg+qrcode"></image>
				<!-- <canvas id="canvas" canvas-id="canvas" class="canvas"></canvas> -->
			</view>
		</view>
		<view class="yqbtn marginAuto" style="width:600rpx;">
			<uv-button text="保存到相册" :customStyle="{
				'background':'#0E71EB',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	import uqrcode from '../../public/uqrcode.js'
	export default {
		data() {
			return {
				apifun:this.apifun,
				usermsg:{},
				qrcode:'',
				qrcodeurl:''
			};
		},
		onLoad() {
			this.usermsg = uni.getStorageSync('usermsg');
			this.initqrcode();
		},
		methods: {
			initqrcode(){
				this.apifun.unirequest('/coach/user/getUserQrcode','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.qrcode = datas.qrcode;
					}else{
						this.apifun.toast(res.msg)
					}
				})
				// uqrcode.make({
				// 	canvasId:'canvas',
				// 	text:"123132",
				// 	size:260,
				// }).then((res)=>{
				// 	this.qrcodeurl = res  // base64
				// })
			}
		},
	};
</script>

<style scoped lang="scss">
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100vw;
		height: 100vh;
	}
	.qrcode{
		position: fixed;
		z-index: 10;
		top: 200rpx;
		left: 50%;
		width:480rpx;
		padding: 60rpx;
		margin-left:-300rpx;
		border-radius:38rpx;
		background: #fff;
		.qrusermsg{
			.qrumavatar{
				width: 120rpx;
				height: 120rpx;
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.qrummsg{
				margin-left: 10rpx;
				.qrummsgname{
					padding-top: 10rpx;
					line-height: 50rpx;
					color: #333333;
					font-size:30rpx;
				}
				.qrummsgxy{
					line-height: 50rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
		.qrcodemsg{
			margin-top:40rpx;
			width: 480rpx;
			height: 480rpx;
			image{
				width: 480rpx;
				height: 480rpx;
			}
			#canvas{
				width: 480rpx;
				height: 480rpx;
			}
		}
	}
	.yqbtn{
		position: fixed;
		z-index: 10;
		bottom:40rpx;
		left: 50%;
		margin-left: -300rpx;
	}
</style>